/** */
<template>
  <li :class="classNames" @click="toggleTab">
    <slot name="label"></slot>
  </li>
</template>

<script>
export default {
  name: "AppTabItem",
  props: {
    currentTab: {
      type: [Number, String],
      required: true
    },
    label: {
      type: String,
      default: 'tab'
    }
  },
  computed: {
    active () {
      console.log('parent currentTab: ', this.$parent.currentTab)
      console.log('sub currentTab: ', this.currentTab)
      return this.$parent.currentTab === this.currentTab
    },
    classNames () {
      return {
        tab: true,
        active: this.active
      }
    },
  },
  data () {
    return {

    };
  },
  mounted () {
    this.$parent.panes.push(this)
  },
  methods: {
    toggleTab () {
      console.log('parent currentTab: ', this.$parent.currentTab)
      console.log('sub currentTab: ', this.currentTab)
      this.$parent.toggleTab(this.currentTab)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  list-style: none;
  line-height: 40px;
  margin-right: 30px;
  position: relative;
  bottom: -2px;
  cursor: pointer;
}
.active {
    border-bottom: 2px solid blue;
  }
.tab:last-child {
  margin-right: 0;
}
</style>
